import { Form, Input } from 'antd';
import an58 from '@mmstudio/an000058';
import React, { useState } from 'react';
import api from '../../../atoms/api';
import AddButton from '../../../components/addbutton';
import { Message as M1, Result as R1 } from '../../api/admin/groups/add.api';

export default function Add({
	pid,
	pname,
	onSave,
}: {
	pid: string | null;
	pname: string | null;
	onSave(group: ITbfdgroup): void;
}) {
	const [data, setdata] = useState({} as M1);
	return <>
		<AddButton dlgtitle='新增子级组别' label='新增子级组别' onSave={async () => {
			if (!data
				|| !data.name
			) {
				return '组别名称不能为空';
			}
			const res = await an58<R1, M1>(api['/api/admin/groups/add'], 'post', {
				...data,
				pid
			});
			if (res.ok === true) {
				onSave({
					groupid: res.id,
					name: data.name
				} as ITbfdgroup);
				return null;
			}
			return res.message;
		}} >
			<Form.Item label='父组别'>
				<span>{pname || '根目录'}</span>
			</Form.Item>
			<Form.Item required label="组别名称:">
				<Input placeholder='组别名称' value={data.name} onChange={(e) => {
					setdata((origin) => {
						return {
							...origin,
							name: e.target.value
						};
					});
				}} />
			</Form.Item>
		</AddButton>
		<style jsx>{`
.icon{
	width: 2rem;
}
`}</style>
	</>;
}

